<!--
  @description: tree
  @creator: yiming
  @date: 2021/03/22
-->
<template>
  <div :class="['i-tree', disabled && 'i-tree-disabled']">
    <Tree v-bind="$attrs" v-on="$listeners" ref="tree" :data="data"></Tree>
  </div>
</template>

<script>
export default {
  name: "IviewTree",
  components: {},
  props: {
    // 只允许选中叶子节点
    onlySelectLeaf: {
      type: Boolean,
    },
    // 树状数据
    data: {
      type: Array,
      required: true,
    },
    // 整个组件级别的禁用
    disabled: {
      type: Boolean,
    },
  },
  data() {
    return {};
  },
  watch: {
    disabled: {
      handler(n, o) {
        // 只有传参disabled才会处理（n/o其中一个为true），未传参不处理（默认情况不传参，n/o均为undefined）
        if (n || o) {
          this.$u.tree.handleTreeNode(this.data, (node) => {
            this.$set(node, "disabled", this.disabled);
          });
        }
      },
      immediate: true,
    },
  },
  computed: {},
  methods: {
    getCheckedNodes() {
      return this.$refs.tree.getCheckedNodes();
    },
    getSelectedNodes() {
      return this.$refs.tree.getSelectedNodes();
    },
    getCheckedAndIndeterminateNodes() {
      return this.$refs.tree.getCheckedAndIndeterminateNodes();
    },
  },
};
</script>

<style lang="less" scoped>
@main-color: red;
.i-tree {
  user-select: none;
  // .show-scroll-y;
  padding: 0 30px;
  max-height: calc(100vh - 300px);
  // 整体禁用状态
  &.i-tree-disabled {
    /deep/.ivu-tree {
      li {
        opacity: 0.8;
        cursor: not-allowed;
        .ivu-tree-arrow-disabled {
          pointer-events: none;
        }
        .ivu-tree-title {
          width: auto;
          cursor: not-allowed;
          &:hover {
            background: transparent;
          }
        }
      }
    }
  }
  /deep/.ivu-tree {
    // max-height: calc(100vh - 300px);
    // padding: 10px 20px;
    li {
      line-height: 34px;
      // .border;
      .ivu-tree-arrow {
        display: inline-block;
        // line-height: 34px;
        // height: 34px;
        .ivu-icon {
          color: #d3d6d9;
        }
        // 禁止选中之后，title不能hover
        &.ivu-tree-arrow-disabled {
          + .ivu-tree-title:hover {
            background: transparent;
            cursor: default;
          }
        }
      }
      .ivu-tree-title {
        display: inline-block;
        font-size: 16px;
        width: 100%;
        // line-height: 34px;
        // height: 34px;
        color: #d3d6d9;
        // .click-active;
        user-select: none;
        transition: all 0.3s;
        &:hover {
          // .bg(fade(#3a3a3a, 80%));
        }
        &.ivu-tree-title-selected {
          // .bg(fade(#3a3a3a, 80%));
          pointer-events: none;
        }
      }
      .ivu-checkbox-wrapper {
        .ivu-checkbox {
          .ivu-checkbox-inner {
            // .border(@main-color);
            // .bg(transparent);
          }
        }
        &.ivu-checkbox-wrapper-checked {
          .ivu-checkbox-inner {
            &::after {
              border-color: @main-color;
              border-width: 1px;
              width: 5px;
              transform: rotate(45deg) scale(1.4);
            }
          }
        }
        .ivu-checkbox-indeterminate {
          .ivu-checkbox-inner {
            &::after {
              height: 2.5px;
              border-color: @main-color;
            }
          }
        }
      }
    }
  }
}
</style>
